<template>
  <div class="form-single-fragment" style="position: relative;">
    <div class="form-single-info">
      <div class="form-single-btn clearfix">
        <el-button type="primary" @click="submitForm('agree')" v-if="btnbox">同意</el-button>
        <el-button @click="submitForm('refuse')" v-if="btnbox">拒绝</el-button>
        <el-button @click="resetForm()">返回</el-button>
      </div>
      <div class="form-single-btn clearfix" style="right: 120px;" v-if="detailData.verifyStatus==2">
        <img src="@/assets/img/adopt.png" />
      </div>
      <el-form :model="detailData" label-width="170px" size="mini" label-position="right">
        <el-row :gutter="20" class="form-single-info">
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="任务名称">{{detailData.taskName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设置截至时间">{{detailData.endDate}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="执行人">{{detailData.executorName}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参与人">{{detailData.participantNames}}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作流程">{{detailData.flowName}}</el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="任务描述：">{{detailData.taskDesc}}</el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核流程进度：">
              <ProcessViewer ref="ProcessViewers" :style="{height: (getMainContextHeight - 400) + 'px'}"
                :xml="processXml"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务日志">
              <el-timeline>
                <el-timeline-item
                  v-for="(activity, index) in activities"
                  :key="index"
                  :timestamp="activity.createTime">
                  {{activity.userName}}：{{activity.content}}
                </el-timeline-item>
              </el-timeline>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="annotation" v-if="examineFrombox">
      <examineFrom ref="examineFrom" @getexamineFrom="getexamineFrom" v-model="examineFrombox"></examineFrom>
    </div>
  </div>
</template>

<script>
import { BusinessOpportunities } from '@/api/commercial.js';
import { Administration } from '@/api/projectAdministration.js';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';
import { mapGetters } from 'vuex';
import examineFrom from '@/components/selector/examineFrom.vue';
export default {
  name: 'CommercialExamine',
  components: { ProcessViewer, examineFrom },
  data () {
    return {
      isShowloading: false,
      examineFrombox: false,
      btnbox: true,
      detailData: {},
      processXml: undefined,
      activities: [],
      ruleForm: {
        flowTaskCommentDto: {
          approvalType: '',
          comment: ''
        },
        id: '',
        taskId: ''
      }
    };
  },
  created () {
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  mounted () {
    if (this.$route.query.businessKey) {
      this.ruleForm.id = this.$route.query.businessKey
      this.ruleForm.taskId = this.$route.query.taskId
      this.loadDetailWidgetData()
    }
    if (this.$route.query.taskdetail) {
      this.btnbox = false
    }
  },
  methods: {
    /**
     * 商机任务详情
     */
    loadDetailWidgetData () {
      let params = {
        id: this.$route.query.businessKey
      }
      return new Promise((resolve, reject) => {
        BusinessOpportunities.Taskdetail(this, params).then(res => {
          this.detailData = res.data
          this.processXml = res.data.bpmnXml
          setTimeout(() => {
            this.$nextTick(() => {
              this.$refs.ProcessViewers.processReZoom()
            });
          }, 500)
          this.loadTasklogWidgetData()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 任务日志
     */
    loadTasklogWidgetData () {
      let params = {
        taskId: this.detailData.id,
        logType: 1
      };
      return new Promise((resolve, reject) => {
        Administration.tasklog(this, params).then(res => {
          this.activities = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 审批
     */
    submitForm (data) {
      this.ruleForm.flowTaskCommentDto.approvalType = data
      this.examineFrombox = true
      this.$nextTick(() => {
        this.$refs.examineFrom.info()
      })
    },
    getexamineFrom (data) {
      this.isShowloading = true;
      this.ruleForm.flowTaskCommentDto.comment = data.comment
      let params = this.ruleForm;
      return new Promise((resolve, reject) => {
        BusinessOpportunities.submitUserTask(this, params).then(res => {
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          });
          this.resetForm()
        }).catch(e => {
          reject(e);
        });
      });
    },
    resetForm () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{width: 90%;margin: 0 auto;}
/deep/.el-tabs__nav{left: inherit;}
/deep/.el-tabs__item{text-align: center;}
/deep/.el-tabs__nav-wrap::after{display: none;}
/deep/.el-tabs__item.is-active{color: #051D69;font-weight: bold;}
/deep/.el-tabs__active-bar{background-color: #051D69;}
.form-single-btn{position: absolute;right: 20px;top: 20px;z-index: 20;}
</style>
